<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户添加</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <!--设置日期-->
    <template>
        <div class="block">
            <span class="demonstration">设置时间</span>
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd hh:MM:ss">
            </el-date-picker>
            <el-button icon="el-icon-search" type="primary" @click="timeToFind">搜索</el-button>
        </div>

    </template>

    <!--分页的条数 -->
    <span style="float: left;font-size: 14px;margin-top: 5px">每页显示的条数:</span>
    <el-pagination
            layout="sizes"
            :page-sizes="[5, 10, 15, 20]"
            @size-change="handleSizeChange"
            :page-size="pageSize" style="float: left;margin-left: 5px">
    </el-pagination>
    <!--表类容-->
    <template>
        <el-table
                :data="tableData.filter(data => !search || data.customer.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="名称"
                    prop="customer.name">
            </el-table-column>
            <el-table-column
                    label="区域"
                    prop="customer.address">
            </el-table-column>
            <el-table-column
                    label="主要经营"
                    prop="customer.business">
            </el-table-column>
            <el-table-column
                    label="状态"
                    prop="tparStatus">
            </el-table-column>

            <el-table-column label="申请时间">
                <template slot-scope="scope">
                    <span @click="detailsCompany(scope.row.id)">{{ scope.row.tparTime }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="备注"
                    prop="taprDesc">
            </el-table-column>

            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
<!--                    <el-button-->
<!--                            size="mini"-->
<!--                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">操作</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--查看公司的产品-->
    <el-dialog title="产品" :visible.sync="dialogTableVisible">
        <el-table :data="productData">
            <el-table-column property="id" label="id" width="150"></el-table-column>
            <el-table-column property="pname" label="产品名称" width="150"></el-table-column>
            <el-table-column property="pprice" label="产品价格" width="150"></el-table-column>
            <el-table-column property="paddtime" label="产品添加时间" width="150"></el-table-column>
            <el-table-column property="pkind" label="产品类型" width="150"></el-table-column>
        </el-table>
    </el-dialog>

    <!--<el-dialog title="申请记录" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>-->
</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //设置日期的时间
                value1: '',
                tableData:null,
                //分页三要素
                //1.当前页
                curr:0,
                //2.每页显示的条数
                pageSize:5,
                //3.总条数
                total:0,
                //当前行
                current:'',
                //客户搜索框
                search:'',
                productData:[{}],
                dialogTableVisible:false,
            }

        },
        mounted(){
            this.pageChange(1)
        },
        methods:{
            handleSizeChange(){

            },
            handleDelete(){

            },
            handleEdit(index,row){
                console.log(row)
                axios.get("/products/"+row.tparComA).then(value => {
                    if(value.data.code==1){
                        console.log(value)
                        this.productData = value.data.data
                    }


                })

                this.dialogTableVisible = true
            },
            pageChange(current) {
                axios.get("/tpar?current="+current+"&pageSize="+this.pageSize).then(value => {
                    if(value.data.code==1){
                        this.tableData = value.data.data.records
                        this.curr = value.data.data.current
                        this.pageSize = value.data.data.size
                        this.total = value.data.data.total
                        console.log(value)
                    }
                })
            },
            //查看限制条件的数据
            pageChange2(current){
                axios.get("/tpar?")
            },
            //查看申请
            detailsCompany(index,row){
                console.log(111)
            },
            timeToFind(){
                axios.get("/tparByTime?time1="+this.value1[0]+"&time2="+this.value1[1]+"&current="+this.current+"&pageSize="+this.pageSize).then(value => {
                    console.log(1)
                    this.tableData = value.data.data.records
                    this.curr = value.data.data.current
                    this.pageSize = value.data.data.size
                    this.total = value.data.data.total
                })
            }

        }
    })
</script>
</body>
</html>